<template>
  <div>
    <!-- Hero Section -->
    <section class="gradient-bg text-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
        <div class="text-center">
          <h1 class="text-5xl font-bold mb-6">
            关于我
          </h1>
          <p class="text-xl max-w-2xl mx-auto">
            让我向您介绍一下我自己，以及我对技术的热爱和追求
          </p>
        </div>
      </div>
    </section>

    <!-- About Me -->
    <section class="py-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 class="text-3xl font-bold mb-6">个人简介</h2>
            <p class="text-gray-600 mb-4">
              我是一名充满激情的全栈开发者，拥有5年以上的Web开发经验。
              我热爱将创意转化为现实，通过代码构建有价值的产品。
            </p>
            <p class="text-gray-600 mb-4">
              我的开发哲学是：简洁、高效、用户至上。我相信好的代码不仅
              要能够解决问题，还要易于维护和扩展。
            </p>
            <p class="text-gray-600">
              在工作之外，我喜欢参与开源项目、写技术博客、学习新技术，
              以及与其他开发者交流经验。
            </p>
          </div>
          <div class="card">
            <img 
              src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face"
              alt="Profile"
              class="w-full rounded-lg"
            />
          </div>
        </div>
      </div>
    </section>

    <!-- Skills -->
    <section class="py-16 bg-gray-100">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold mb-4">技术栈</h2>
          <p class="text-gray-600">我掌握的主要技术和工具</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
          <div class="card">
            <h3 class="text-xl font-semibold mb-4 text-blue-600">前端开发</h3>
            <ul class="space-y-2 text-gray-600">
              <li>• Vue.js / Nuxt.js</li>
              <li>• React / Next.js</li>
              <li>• TypeScript</li>
              <li>• TailwindCSS</li>
              <li>• HTML5 / CSS3</li>
            </ul>
          </div>
          
          <div class="card">
            <h3 class="text-xl font-semibold mb-4 text-green-600">后端开发</h3>
            <ul class="space-y-2 text-gray-600">
              <li>• Node.js / Express</li>
              <li>• Python / Django</li>
              <li>• RESTful API设计</li>
              <li>• GraphQL</li>
              <li>• JWT认证</li>
            </ul>
          </div>
          
          <div class="card">
            <h3 class="text-xl font-semibold mb-4 text-purple-600">数据库 & 部署</h3>
            <ul class="space-y-2 text-gray-600">
              <li>• MongoDB</li>
              <li>• PostgreSQL</li>
              <li>• Redis</li>
              <li>• Docker</li>
              <li>• Vercel / AWS</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- Experience -->
    <section class="py-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold mb-4">工作经验</h2>
          <p class="text-gray-600">我的职业发展历程</p>
        </div>
        
        <div class="space-y-8">
          <div class="card">
            <div class="flex justify-between items-start mb-4">
              <div>
                <h3 class="text-xl font-semibold">高级全栈开发者</h3>
                <p class="text-gray-600">某科技公司</p>
              </div>
              <span class="text-sm text-gray-500">2022 - 至今</span>
            </div>
            <p class="text-gray-600">
              负责公司核心产品的架构设计和开发，带领团队完成多个大型项目，
              优化系统性能，提升用户体验。
            </p>
          </div>
          
          <div class="card">
            <div class="flex justify-between items-start mb-4">
              <div>
                <h3 class="text-xl font-semibold">全栈开发者</h3>
                <p class="text-gray-600">某互联网公司</p>
              </div>
              <span class="text-sm text-gray-500">2020 - 2022</span>
            </div>
            <p class="text-gray-600">
              参与多个Web项目的开发，从前端到后端的全栈开发，
              积累了丰富的项目经验和团队协作经验。
            </p>
          </div>
          
          <div class="card">
            <div class="flex justify-between items-start mb-4">
              <div>
                <h3 class="text-xl font-semibold">前端开发者</h3>
                <p class="text-gray-600">某初创公司</p>
              </div>
              <span class="text-sm text-gray-500">2019 - 2020</span>
            </div>
            <p class="text-gray-600">
              负责公司官网和产品的前端开发，使用Vue.js构建响应式网站，
              优化用户体验和页面性能。
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>